<template>
  <div>

    <van-popup class="all" round v-model="show_sub_add" @close="close_pop">
      <van-cell-group class="input-name">
        <van-field border @input="getValue" v-model="value" :label="`${typeName}名称`" :placeholder="`请输入${typeName}名称`" />
      </van-cell-group>
      <div class="but-list">
        <van-button @click="empty">清空名称</van-button>
        <van-button @click="close_pop">确定</van-button>
      </div>

    </van-popup>
  </div>
</template>

<script>
  export default {
    name: "FranchiessName",
    props: {
      show_add: Boolean,
      my_name:String,
      typeName: {
        type: String,
        default: '加盟商'
      }
    },
    model: {
      prop: 'my_name',
      event: 'change',
    },
    mounted() {
      this.value = this.my_name;
    },
    watch:{
      my_name:{
        handler(val){
          this.value = val;
        }
        ,
        immediate: true,
      
      }
    },
    data() {
      return {
        value: ''
      }
    },


    computed: {

      show_sub_add: {
        get() {
          return this.show_add
        },
        set(value) {
          console.log(value);
          if (!value) {
            this.close_pop();
          }
        }
      }
    },
    methods: {
      empty(){
        this.$emit('change','');
        this.close_pop();
      },
      getValue(val){
        this.$emit('change',val)
      },
      close_pop() {
        
        this.$emit('update:show_add', false);
      }
    },
  }
</script>

<style lang="less" scoped>
  /deep/ .van-popup {
    width: 80%;
  }
  .all{
    width: 80%;
    height: 15vh;
    display: flex;
    flex-direction: column;
    justify-content:space-evenly;
    .input-name{
      margin: 15px auto 15px;
      
      width: 80%;
    }

    .but-list{
      margin-top: 15px;
      display: flex;
      justify-content:space-around;
    }
  }
</style>